<template>
	<view class="list-info-packbox relative">
		<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/list-info-bg.png`" mode=""></image>
		<view class="flex flex-justify-content-between flex-align-items-center relative">
			<view class="flex">
				<view class="truncate list-info-title">
					{{ title }}
				</view>
				<view class="list-info-date">
					{{ date }}
				</view>
			</view>

			<view :style="{'color': type=== 2 ? '#EEF43E' : '#63FFF7'}" style="flex: 1;text-align: right;">
				<text>{{ type === 2 ? '+' : '-' }}</text>
				<text>{{ value }}</text>
				<text v-if="fromPage === 'bill' || fromPage === 'balance'">机能</text>
				<text v-if="fromPage === 'currency'">旺卡币</text>
				<text v-if="fromPage === 'integral'">积分</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'comListInfo',
		props: {
			fromPage: {
				type: String,
				default: () => {
					return ''
				},
			},
			type: String | Number,
			date: String,
			value: String,
			title: String,
		},
		data() {
			return {};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		methods: {

		}
	};
</script>

<style lang="scss" scoped>
	.list-info-packbox {
		height: 96rpx;
		line-height: 96rpx;
		padding: 0 18rpx;
		margin: 22rpx 18rpx;
		font-size: 28rpx;
		color: #FFFFFF;

		.list-info-title {
			color: #FFFFFF;
			width: 7em;
		}

		.list-info-date {
			font-size: 24rpx;
			color: #FFFFFF;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 18rpx;
			margin: 22rpx 18rpx;
			font-size: 26rpx;
		}
		.list-info-title {
			color: #FFFFFF;
			// width: 8em;
		}

		.list-info-date {
			font-size: 18rpx;
			color: #FFFFFF;
		}
	}
</style>